import { CascadePicker, Picker } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import type { PickerProps } from 'antd-mobile/es/components/picker'

import styles from './index.module.less'
import { useState } from 'react'
import type { CascadePickerOption } from 'antd-mobile/es/components/cascade-picker'

/**
 * placeholder   string    可描述输入字段预期值的提示信息
 * valueRender   function  渲染函数
 */

interface PickerInterface extends Omit<PickerProps, 'columns'> {
    options?: CascadePickerOption /** cascade 数据 */
    columns?: PickerProps['columns']
    placeholder: string
    valueRender?: (data: any) => JSX.Element
    beforeShow?: () => Promise<boolean>
    beforeConfirm?: (value: any, itemExtends: any) => Promise<any>
    type?: 'cascade' | 'picker'
    rightIcon?: JSX.Element
}

export default function FormPicker({
    placeholder = '',
    valueRender = items => items.map((item: any) => item?.label)?.join(' '),
    beforeShow,
    type = 'picker',
    onConfirm,
    beforeConfirm,
    rightIcon,
    ...props
}: PickerInterface) {
    const handleOpen = (action: any) => {
        if (beforeShow) {
            beforeShow().then(() => {
                action.open()
            })
        } else {
            action.open()
        }
    }
    const [Comp] = useState<any>(type === 'cascade' ? CascadePicker : Picker)

    const handleConfirm = (value: any, itemExtends: any) => {
        if (beforeConfirm) {
            beforeConfirm(value, itemExtends)
                .then(() => {
                    onConfirm?.(value, itemExtends)
                })
                .catch(err => {
                    onConfirm?.(props?.value || [], {} as any)
                })
        } else {
            onConfirm?.(value, itemExtends)
        }
    }

    return (
        <Comp {...props} onConfirm={handleConfirm} className={styles['woc-picker-warpper']}>
            {(items: any, action: any) => {
                return (
                    <div className={styles.line}>
                        {items.length > 0 && items?.[0] ? (
                            <div
                                className={'value-wrapper'}
                                onClick={(e: any) => {
                                    e.preventDefault()
                                    e.stopPropagation()
                                    handleOpen(action)
                                }}
                            >
                                <span className={'value_span'}>{valueRender(items)}</span>
                                {rightIcon || <RightOutline style={{ color: 'rgba(17,31,44,0.28)' }} />}
                            </div>
                        ) : (
                            <div
                                className={'placeholder'}
                                onClick={(e: any) => {
                                    e.preventDefault()
                                    e.stopPropagation()
                                    handleOpen(action)
                                }}
                            >
                                <span className={'value_span'}>{placeholder}</span>
                                {rightIcon || <RightOutline style={{ color: 'rgba(17,31,44,0.28)' }} />}
                            </div>
                        )}
                    </div>
                )
            }}
        </Comp>
    )
}
